@import '../../_styles/variables.module.scss';

$arrow-size: 8px;

.wrapper {
    max-width: 150/16+rem;
    background-color: $color-base-5;
    border-radius: 2px;
    padding: 0.5rem 0;
    position: relative;
    z-index: 10;

    &:before {
        content: "";
        width:0;
        height: 0;
        border: $arrow-size solid transparent;
        border-bottom: $arrow-size solid $color-base-5;
        position: absolute;
        top: -$arrow-size*2;
        right: 0%;
        transform: translateX(-50%);
    }
}

.list {
    padding: 0;
    margin: 0;
    text-align: center;
}

.item {
    cursor: pointer;
    font-size: 13/16+rem;
    color: $color-contrast-2;
    padding: 0.6rem 2rem;

    &:hover {
        color: $color-contrast-1;
        background-color: rgba($color-contrast-5, 0.3%);
    }
}

.item.disabled {
    color: $color-contrast-4;
}


.itemDanger {
    composes: item;
    color: $color-danger;

    &:hover {
        color: $color-danger;
    }
}